<!-- 考勤-基础设置-假期设置-假期类型 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <a-collapse
      :default-active-key="['1']"
      :bordered="false"
      style="margin-top: 10px"
    >
      <a-collapse-item header="使用指南" key="1">
        <template #header>
          <span style="font-size: 24px">使用指南</span>
        </template>
        <a-list :bordered="false" :split="false" size="small">
          <a-list-item v-for="(item, index) in listArr" :key="index">
            {{ item }}
          </a-list-item>
        </a-list>
      </a-collapse-item>
    </a-collapse>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="请输入假期类型"
          search-button
          @search="onSearch"
          @press-enter="onSearch"
          v-model="nameSearch"
        />
      </template>
      <template #right>
        <a-button type="primary" @click="add(null)">新增假期类型</a-button>
        <a-button type="outline" @click="del(undefined)" status="danger">
          批量删除
        </a-button>
      </template>
    </ConditionBox>
    <table-turn :table-data="getTableData" ref="tableRef" :args="args">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <!-- <a-table-column :width="200" data-index="colour" title="假期颜色">
        <template #cell="{ record }">
          <div
            class="color"
            :style="{ backgroundColor: record.colour }"
            :title="record.colour"
          ></div>
        </template>
      </a-table-column> -->
      <a-table-column :width="200" data-index="name" title="假期类型">
      </a-table-column>
      <a-table-column data-index="describe" title="假期描述"> </a-table-column>
      <a-table-column :width="200" data-index="status" title="状态">
        <template #cell="{ record }">
          <a-tag
            class="enable"
            :color="
              record.status === 1
                ? `rgb(var(--green-1))`
                : 'rgb(var(--danger-1))'
            "
            :style="{
              color:
                record.status === 1
                  ? `rgb(var(--green-6))`
                  : 'rgb(var(--danger-6))',
              '--enable':
                record.status === 1
                  ? `rgb(var(--green-6))`
                  : 'rgb(var(--danger-6))'
            }"
          >
            {{ record.status === 1 ? '启用' : '停用' }}
          </a-tag>
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="" title="操作" fixed="right">
        <template #cell="{ record }">
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="goEdit(record)"
            />
          </a-tooltip>
          <a-tooltip content="删除" position="left">
            <a-popconfirm content="是否确认删除该条数据?" @ok="del(record.id)">
              <icon-font
                type="icon-delete"
                :size="26"
                :style="{
                  cursor: 'pointer',
                  marginRight: '10px'
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
  <AddModal
    v-model:visible="modalVisible"
    :data="currData"
    @holiday-type-add="holidayTypeAdd"
  ></AddModal>
</template>

<script lang="ts" setup>
import {
  GetHolidayType,
  PostHolidayType,
  PutHolidayType,
  DelHolidayType
} from '@/apis/management/attendance/baseSetting';
import type TTableTurn from '@/components/TableTurn/type';
import AddModal from './AddModal.vue';
import cloneDeep from 'lodash.clonedeep';
import { Message, Modal } from '@arco-design/web-vue';

const title = '假期类型';
const breadCrumb: string[] = ['考勤', '基础设置', '假期设置', '假期类型'];
const listArr = [
  `1、您可以新增/启用更多假期类型。设置后，可以到“假期方案”为员工设置不同假期规则。`,
  `2、您可以设置短期病假、事假是否带薪。员工请假先扣除带薪假期余额，再计算请假扣款。`
];

let modalVisible = ref(false); // 判断新增弹出框是否打开
let currData = ref(); // 储存当前选中数据
let tableRef = ref<TTableTurn>();
let nameSearch = ref(''); // 搜索框值

// 选择器配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};

// 储存选中的数据
const selectedList = computed(() => tableRef.value?.selectedList);

// 新增
const add = (record: any) => {
  modalVisible.value = true;
};

// 获取表格数据
const getTableData = async (page: any): Promise<[] | void> => {
  try {
    const res = await GetHolidayType({
      ...page,
      name: nameSearch.value
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索框搜索事件
const onSearch = () => {
  refresh();
};

// 编辑
const goEdit = (record: any) => {
  console.log(record);
  currData.value = cloneDeep(record);
  modalVisible.value = true;
};

watch(
  () => modalVisible.value,
  (val) => {
    if (val) return;
    for (const key in currData.value) {
      currData.value[key] = null;
    }
  }
);

// 删除某一行
const del = async (id: number | void) => {
  try {
    if (!id) {
      if (selectedList.value.length === 0) {
        Message.error('请至少选择一项！');
      } else {
        Modal.confirm({
          title: '提示',
          content: '确定要删除选中的数据吗？',
          onOk: async () => {
            try {
              await DelHolidayType({
                ids: selectedList.value
              });
              tableRef.value && (tableRef.value.selectedList = []);
              refresh();
            } catch (error: unknown) {
              console.log(error);
            }
          }
        });
      }
    } else {
      await DelHolidayType({
        ids: [id]
      });
      tableRef.value && (tableRef.value.selectedList = []);
      refresh();
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

// 弹窗自定义事件
const holidayTypeAdd = async (record: any) => {
  await (record.id ? PutHolidayType(record) : PostHolidayType(record));
  refresh();
};

// 刷新表格数据
const refresh = () => {
  tableRef.value?.loadData();
};
</script>

<style lang="less" scoped>
.color {
  width: 25px;
  height: 25px;
}

.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
}

:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
